<template>
  <a
    ref="banner"
    class="banner"
    :class="{ skeleton: !item }"
    :href="item?.adv_url"
    :style="style"
    target="_blank"
    rel="nofollow"
    v-show="!isClose"
    @click="onBannerClicked(item)"
  >
    <Video v-if="isVideo" :url="item?.media_url" :active="active" :ready="ready" in-card></Video>
    <EncryptImage v-if="isPhoto" :src="item?.media_url" :border-radius="10" :object-fit="fit"></EncryptImage>
    <div class="tag font-weight-500 font-size-10 line-height-120">AD</div>
    <div v-if="!disableClose" class="close pointer" @click.stop="close">
      <Icon name="close" size="12"></Icon>
    </div>
  </a>
</template>

<script setup>
import { computed, inject, ref } from 'vue'
import { useElementSize } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import EncryptImage from '@/components/multimedia/EncryptImage.vue'
import Video from '@/components/multimedia/Video.vue'
import { AD_TYPE } from '@/constant'
import { trackEvent } from '@/gtm'
import API from '@/http'

const props = defineProps({
  item: { type: Object },
  size: { type: String }, // sm(300x50) | md(300x100) | lg | long(160x600)
  disableClose: { type: Boolean, default: false },
  active: { type: Boolean },
  ready: { type: Boolean },
  eventId: { type: Number, default: null },
  fit: { type: String, default: 'cover' },
})

const emits = defineEmits(['close', 'click:ad'])

const appStore = useAppStore()
const { isDesktop } = storeToRefs(appStore)

const banner = ref(null)
const { width } = useElementSize(banner)

const style = computed(() => {
  switch (props.size) {
    case 'long':
      return { 'padding-bottom': `${(600 / 160) * 100}%` }
    case 'lg':
      return { height: isDesktop.value ? '70vh' : '62vh' }
    case 'md':
      return { height: `${(width.value * 100) / 300}px` }
    case 'sm':
      return { height: `${(width.value * 50) / 300}px` }
    default:
      return {}
  }
})

const isVideo = computed(() => props.item?.type === AD_TYPE.VIDEO)
const isPhoto = computed(() => props.item?.type === AD_TYPE.PHOTO)

const isClose = ref(false)
function close(evt) {
  evt.preventDefault()
  isClose.value = true
  emits('close')
}

/** 如果外部有提供 eventId 則當廣告點擊時觸發GTM事件追蹤 */
const injectEventId = inject('adEventId', null)
const onBannerClicked = async (item) => {
  if (props.eventId || injectEventId) {
    trackEvent({ key: props.eventId || injectEventId, meta: { id: item.id, url: item.adv_url } })
  }
  await API.App.clickAd({ data: { id: item.id } })
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/loading-skeleton.scss';

.banner {
  width: 100%;
  border-radius: 0.625rem;
  display: block;
  position: relative;

  .tag,
  .close {
    border-radius: 1.25rem;
    background: rgba(var(--v-theme-background), 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0.315rem;
  }

  .tag {
    width: 2rem;
    height: 1rem;
    padding: 0.125rem 0.375rem;
    left: 0.315rem;
  }

  .close {
    width: 1rem;
    height: 1rem;
    right: 0.315rem;
  }

  &.skeleton {
    @include loading-skeleton;
  }
}
</style>
